<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getoptions = () => {
  queryConsumeChartForDay({ dictKey: "UPW02", day: 7 }).then((response: any) => {
    console.log(response);
    isShowEcharts.value = true;
    option.value = {
      color: ["#39C670 ", "#3B82F6", "#28D892", "#FF5639"],
      grid: {
        left: "20px",
        top: "40px",
        right: "10px",
        bottom: "10px",
        containLabel: true
      },
      legend: {
        x: "center"
      },
      tooltip: {
        confine: true
      },
      xAxis: {
        type: "category",
        boundarGap: false,
        // data: response.xaxis
        data: [1, 2, 3, 4, 5, 6, 7]
      },
      yAxis: {
        name: "tCO₂e",
        type: "value"
      },
      series: [
        // {
        //   data: response.panelList.filter(item => item.title == "实际用量")[0].details.map(item => (item.value != null ? item.value : 0))
        //     ? response.panelList.filter(item => item.title == "实际用量")[0].details.map(item => (item.value != null ? item.value : 0))
        //     : [0, 0, 0, 0, 0, 0, 0],
        //   type: "bar",
        //   name: "实际用量",
        //   stack: "total",
        //   barWidth: "25px",
        //   label: {
        //     show: true,
        //     color: "black"
        //   },
        //   emphasis: {
        //     focus: "series"
        //   }
        // },
        {
          // data: response.panelList.filter(item => item.title == "NaOH")[0].details.map(item => (item.value != null ? item.value : 0))
          //   ? response.panelList.filter(item => item.title == "NaOH")[0].details.map(item => (item.value != null ? item.value : 0))
          //   : [0, 0, 0, 0, 0, 0, 0],
          data: [600, 700, 800, 400, 300, 320, 410],
          type: "bar",
          name: "工厂A",
          stack: "total",
          barWidth: "25px",
          label: {
            show: true,
            color: "black"
          },
          emphasis: {
            focus: "series"
          }
        },
        {
          // data: response.panelList.filter(item => item.title == "NaCLO")[0].details.map(item => (item.value != null ? item.value : 0))
          //   ? response.panelList.filter(item => item.title == "NaCLO")[0].details.map(item => (item.value != null ? item.value : 0))
          //   : [0, 0, 0, 0, 0, 0, 0],
          data: [500, 600, 700, 400, 300, 320, 410],
          type: "bar",
          name: "工厂B",
          stack: "total",
          barWidth: "25px",
          label: {
            show: true,
            color: "black"
          },
          emphasis: {
            focus: "series"
          }
        }
      ]
    };
  });
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
